<template>
  <div style="background: #f5f5f5;overflow: hidden;">
    <pageTop :text="text"></pageTop>
    <div @click="blank">
      <slideBar></slideBar>
      <div>
        <div class="title">
          <p class="position">{{recruit.title}}</p>
          <p class="require">学历: <span>{{recruit.education}} &nbsp;&nbsp; </span>  经验: <span>{{recruit.working_life}} &nbsp;&nbsp; </span> 城市: <span>{{recruit.position}}</span></p>
        </div>
        <div class="bottom">
          <div class="content">
            <p class="scrip">职位描述</p>
            <div style="font-size: 13px;color: #333;line-height: 26px;text-align: left">
              <p>职位诱惑：</p>
              <p>{{recruit.seduction}}</p>
              <p>职位描述：</p>
              <p>【岗位名称】{{recruit.title}}</p>
              <p>【需求人数】{{recruit.number}}</p>
             <!-- <p>【重点要求】</p>-->
              <p v-html="$options.filters.unescape(recruit.content)">
                {{recruit.content}}
              </p>
            </div>
          </div>
        </div>

      </div>
      <gotop></gotop>
    </div>
    <pageBottom></pageBottom>
  </div>
</template>

<script>
  import pageTop from '../components/pageTop'
  import slideBar from '../components/slideBar'
  import gotop from '../components/public/goTop'
  import pageBottom from '../components/pageBottom'
  export default {
    name: "recruitDetail",
    components:{
      pageTop,
      slideBar,
      gotop,
      pageBottom
    },
    data(){
      return{
        text:'加入我们',
        recruit:[],
      }
    },
    filters: {
      unescape:function (html) {
        return html
          .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
          .replace(/&lt;/g, "<")
          .replace(/&gt;/g, ">")
          .replace(/&quot;/g, "\"")
          .replace(/&#39;/g, "\'");
      }
    },
    created(){
      const id = this.$route.params.recruit_id;
      var that=this;
      this.$http({
        url:'/offcial/index.php/index/Acticle/RecruitContent',
        method:'post',
        data:{
          recruit_id:id,
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
          console.log(response);
          const resData=response.data;
          if(resData.code==1){
            that.recruit = resData.data;
            console.log(that.recruit);
          }
        })
        .catch(function (response) {
          console.log(response);
        })
    },
    methods:{
      blank(){
        $("#containers").css(
          {"transform":"translateX(0vw)","transition":"transform .5s"});
      },
      menu(){
        $("#containers").css(
          {"transform":"translateX(72vw)","transition":"transform .5s"});
      }
    },
  }
</script>

<style scoped lang="scss">
.title{
  width: 100%;
  height: 25.67vw;
  background: #fff;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  padding-left: 3.5vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
    .position{
      font-size: 28px;
      color: #333;
      text-align: left;
      line-height: 66px;
    }
  .require{
    font-size: 12px;
    color: #666;
    text-align: left;
  }
}
.bottom{
  width: 100vw;
  height:auto;
  background: #fff;
  margin: 0px auto;
    .content{
      width: 92vw;
      height: 100%;
      margin: 0px auto;
      padding-top:4vw;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: left;
      font-size: 13px;
      color: #333;
      .scrip{
        font-size: 20px;
        color: #333;
      }
    }
}
</style>
